<template>
	<div>
		<div class="list_item" @click="subcomment">
			<div class="list_item_top">
				<img class="user_img" src="../../../assets/home/top-icon1.png" alt="">
				<nav>
					<span>{{ props.commentData.username }}</span>
					<li>
						<p>{{ props.commentData.content }}</p>
						<!-- <div>
							<img v-for="(item, index) in props.commentData.art_img_more" :src="item" alt="">
						</div> -->
						<div class="imgBox_out">
							<div class="imgBox" v-for="(f_item, index) in props.commentData.art_img_more">
								<div @click="openImg(f_item)">
									<el-icon color="#FFFFFF" :size="25"><zoom-in /></el-icon>
								</div>
								<img :src="f_item" alt="">
							</div>
						</div>
					</li>

				</nav>
				<div class="btn_box">
					<span>{{ props.commentData.add_time.substring(0,16) }}</span>
					<button @click="openComment">评论</button>
				</div>

			</div>
		</div>
		<div :class="{ isopen: active }" class="comment">
			<textarea v-model="CommentText" placeholder="请输入评论内容"></textarea>
			<div>
				<el-upload v-model:file-list="fileList" :limit="3" action="http://kaoshiguanli.haimijiaoyu.com/api/common/upload" :data="{ type: 'image' }"
					list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
					添加图片
				</el-upload>
			</div>
			<button @click="submit">发布评论</button>
		</div>
		<div class="list_item_bottom" v-for="(item, index) in props.commentData.children">
			<nav class="commen_title">
				<div>
					<img class="user_img" src="../../../assets/home/top-icon1.png" alt="">
					<span>{{ item.username }}</span>
				</div>
				<span>{{ item.add_time.substring(0,16) }}</span>
			</nav>
			<nav>
				<li>
					<p>{{ item.content }}{{ item.content }}{{ item.content }}{{ item.content }}{{ item.content }}</p>
					<!-- <div>
							<img v-for="(item, index) in item.art_img_more" :src="item" alt="">
						</div> -->
					<div class="imgBox_out">
						<div class="imgBox" v-for="(c_item, index) in item.art_img_more">
							<div @click="openImg(c_item)">
								<el-icon color="#FFFFFF" :size="25"><zoom-in /></el-icon>
							</div>
							<img :src="c_item" alt="">
						</div>
					</div>
				</li>

			</nav>
			<!-- {{ props.commentData.children }} -->
		</div>
	</div>
</template>

<script setup lang="ts">
import { ZoomIn } from '@element-plus/icons-vue'
import axios from 'axios'
import type { UploadProps, UploadUserFile } from 'element-plus'
import { ref } from 'vue'
import {
	useRouter
} from 'vue-router'
const $myemit = defineEmits(['addComment', 'lookImg'])
const router = useRouter()
const CommentText = ref('')
const props = defineProps({
	commentData: Object
})
const subcomment = () => {

}
const openComment = () => {
	active.value = !active.value
}
const active = ref(false)
const fileList = ref<UploadUserFile[]>([])

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
	console.log(uploadFile, uploadFiles)
}
const openImg = (url) => {
	$myemit('lookImg', url)
}
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
	$myemit('lookImg', uploadFile.url!)
}

const submit = () => {
	var imgList = []
	console.log(fileList.value,"7879")
	fileList.value.forEach(element => {
		imgList.push(element.response.data.video_url)
	});

	// Article/comment_add
	var data = {
		article_id: router.currentRoute.value.query.id,
		username: localStorage.getItem('username'),
		content: CommentText.value,
		art_img_more: imgList.join(','),
		pid: props.commentData.id
	}
	if (!data.content) {
		ElMessage.error('请输入评论内容！')
		return
	}
	axios({
		url: '/Article/comment_add',
		baseURL:'http://kaoshiguanli.haimijiaoyu.com/api/',
		method: 'post',
		data
	}).then(res => {
		ElMessage({
			message: '评论成功',
			type: 'success',
		})
		CommentText.value = ''
		fileList.value = []
		active.value = !active.value
		$myemit('addComment', true)
		// router.back()
	})
}

</script>

<style lang="scss" scoped>
@media screen and (min-width:1200px) {
	.list_item {
		width: 1000px;
		padding: 20px;
		margin-top: 20px;
	}

	.list_item_top,
	.list_item_bottom {
		display: flex;
		justify-content: space-between;

		.user_img {
			width: 30px;
			height: 30px;
		}

		span {
			font-size: 14px;
			font-weight: 400;
			color: #666666;
			line-height: 30px;
		}

		nav {
			width: 780px;

			// border-bottom: 1px solid #EEEEEE;
			li {
				display: flex;
				flex-direction: column;

				p {
					width: 780px;
					font-size: 16px;
					font-weight: 400;
					color: #333333;
					line-height: 19px;
					margin-top: 16px;
					margin-bottom: 24px;
					word-wrap: break-word;
				}

				.imgBox_out {
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					width: 780px;
				}

				.imgBox {
					width: 100px;
					height: 100px;
					padding: 20px;
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;
					box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.03);
					margin-right: 20px;
					margin-bottom: 20px;

					div {
						width: 100%;
						height: 100%;
						position: absolute;
						display: flex;
						justify-content: center;
						align-items: center;
						background-color: rgba($color: #000000, $alpha: 0.4);
						opacity: 0;
						transition: all 0.6s;

					}

					img {
						max-width: 100px;
						max-height: 100px;
					}

					div:hover {
						opacity: 1;
					}
				}
			}



		}

		div {
			display: flex;
			flex-direction: column;

			button {
				margin-top: 16px;
				font-size: 14px;
				padding: 5px 15px;
				background-color: #FF9933;
				border-radius: 20px;
				border: none;
				color: #FFFFFF;
			}
		}
		.btn_box{
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			span{

			}
		}
	}

	.list_item_bottom {
		width: 920px;
		margin-left: 60px;
		flex-direction: column;
		justify-content: flex-end;

		.user_img {
			margin-right: 10px;
		}

		.commen_title {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			div {
				flex-direction: row;
				align-items: center;
			}
		}

	}

	.comment {
		width: 1000px;
		height: 0px;
		min-height: 0px;
		background: #F3FCFF;
		border-radius: 10px 10px 10px 10px;
		position: relative;
		overflow: hidden;
		transition: all .5s;

		textarea {
			width: 960px;
			background-color: rgba(0, 0, 0, 0);
			font-size: 14px;
			font-weight: 400;
			color: #666666;
			line-height: 40px;
			min-height: 100px;
			// padding: 10px;
			overflow: hidden;
			// resize:none;
			border: none;
			outline: medium;
			margin-bottom: 15px;
		}

		button {
			width: 116px;
			height: 35px;
			background: #FF9933;
			border-radius: 35px;
			position: absolute;
			bottom: 15px;
			right: 15px;
			border: none;
			font-size: 14px;
			font-weight: 600;
			color: #FFFFFF;
		}

		:deep(.el-upload-list--picture-card) {
			margin-left: 18px;
		}

		:deep(.el-upload-list__item),
		:deep(.el-upload--picture-card) {
			width: 100px;
			height: 100px;
		}
	}

	.isopen {
		height: auto;
		min-height: 200px;
		padding: 15px 15px 60px 15px;
	}
}

@media screen and (max-width: 1200px) {
	.list_item {
		width: 95vw;
		padding: 3vw;
		margin-top: 3vw;
	}

	.list_item_top,
	.list_item_bottom {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;

		.user_img {
			width: 5vw;
			height: 5vw;
			margin-right: 1.3vw;
		}

		span {
			font-size: 1.8vw;
			font-weight: 400;
			color: #666666;
		}

		nav {
			width: 82vw;

			li {
				p {
					width: 82vw;
					font-size: 2.1vw;
					font-weight: 400;
					color: #333333;
					line-height: 5vw;
					margin-top: 2.1vw;
					margin-bottom: 3.5vw;
					word-wrap: break-word;
				}

				.imgBox_out {
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					width: 82vw;
				}

				.imgBox {
					width: 15vw;
					height: 15vw;
					padding: 3vw;
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;
					box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.03);
					margin-right: 3vw;
					margin-bottom: 3vw;

					div {
						width: 100%;
						height: 100%;
						position: absolute;
						display: flex;
						justify-content: center;
						align-items: center;
						background-color: rgba($color: #000000, $alpha: 0.4);
						opacity: 0;
						transition: all 0.6s;

					}

					img {
						max-width: 15vw;
						max-height: 15vw;
					}

					div:hover {
						opacity: 1;
					}
				}
			}



		}

		.btn_box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 82vw;

			button {
				font-size: 1.8vw;
				padding: 1vw 3vw;
				background-color: #FF9933;
				border-radius: 4vw;
				border: none;
				color: #FFFFFF;
			}
		}
	}

	.list_item_bottom {
		width: 78vw;
		margin-left: 10vw;
		flex-direction: column;
		justify-content: flex-end;

		.user_img {
			margin-right: 1vw;
		}
		p{
			width: 78vw;
		}
		.commen_title {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			div {
				display: flex;
				flex-direction: row;
				align-items: center;
			}
		}

	}

	.comment {
		width: 95vw;
		background: #F3FCFF;
		border-radius: 1.3vw;
		position: relative;
		display: flex;
		flex-direction: column;
		height: 0px;
		overflow: hidden;
		min-height: 0px;
		transition: all 1s;

		textarea {
			width: 90vw;
			background-color: rgba(0, 0, 0, 0);
			font-size: 1.8vw;
			font-weight: 400;
			color: #666666;
			line-height: 4vw;
			min-height: 18vw;
			overflow: hidden;
			border: none;
			outline: medium;
			margin-bottom: 2vw;
			padding-top: 2vw;
		}

		button {
			// width: 16vw;
			padding: 1vw 3vw;
			background: #FF9933;
			border-radius: 35px;
			position: absolute;
			bottom: 2vw;
			right: 2vw;
			border: none;
			font-size: 14px;
			font-weight: 600;
			color: #FFFFFF;
		}

		:deep(.el-upload-list--picture-card) {

			li,
			div {
				width: 15vw;
				height: 15vw;
				margin: 0 2vw 2vw 0;
				font-size: 1vw;
			}
		}
	}

	.isopen {
		height: auto;
		min-height: 10vw !important;
		padding: 2vw 2vw 8vw 2vw;
	}
}</style>